<!--
wy 我的收藏页面
描述：显示收藏的美食和商家
最后修改时间：9.20-14.29
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃游网-我的收藏-商家收藏</title>

    <link rel="stylesheet" href="css/quote/bootstrap.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/user/colle.css">

    <script src="js/quote/jquery-3.4.1.js"></script>
    <script src="js/quote/hf.js"></script>

    <script src="js/quote/jquery.js"></script>
    <script src="js/quote/bootstrap.js"></script>
    <script src="js/custom.js"></script>

    <link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
    <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="css/user/bootstrap-grid.min.css"/><!--CSS RESET-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<div class="page-content" style="margin-top: -15px">

    <br/>
    <div class="container">
        <div id="mercury" class="contain">
            <div class="mercury-cont">
                <div class="fav-floatbar">
                    <div class="fav-bar-height">
                        <div class="fav-bar-float">
                            <div class="fav-bar-float-layout clearfix">
                                <div class="fav-select" data-spm="1997985009">

                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation " class="active">
                                            <a href="#foodcoll" aria-controls="foodcoll" role="tab" data-toggle="tab"
                                               class="fav-sel-link">美食收藏</a>
                                        </li>

                                        <li role="presentation ">
                                            <a href="#storecoll" aria-controls="storecoll" role="tab" data-toggle="tab"
                                               class="fav-sel-link">商家收藏</a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" style="margin-left: -19px;margin-right: -20px">
                    <div id="storecoll" role="tabpanel" class="tab-pane " style="margin:0 20px">
                        <div id="storelist" style="min-height: 440px">
                            <!--<div class="col-poi">
                                <div class="col-item clearfix">
                                    <div class="item-img"><img
                                            src="//p0.meituan.net/msmerchant/a3f9a321798c49a66e6333934105d6ef36556.jpg@200w_112h_1e_1c"
                                            class="image"></div>
                                    <div class="item-info"><p class="poi-name">收藏示例，这个是假的</p>
                                        <span>商家评分：4.1分</span>
                                        <p>月亮湾 火锅</p></div>
                                    <div class="btn-box"><a href="https://www.meituan.com/meishi/192801520/"
                                                            class="link show-deal" target="_blank">进入商家</a>
                                        <a href="#"
                                           class="link show-deal" target="_blank">取消收藏</a>
                                    </div>
                                </div>
                            </div>-->
                        </div>
                        <nav style="text-align: center">
                            <ul class="pagination" id="storepage">
                                <!--<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                <li><a href="#">1</a></li>
                                <li class="active"><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                                </li>-->
                            </ul>
                        </nav>
                    </div>

                    <div id="foodcoll" role="tabpanel" class="tab-pane active" style="margin-top: 20px">
                        <div class="container">
                            <div class="row img-item-list">
                                <!--<div class="col-md-3 col-sm-6">
                                    <div class="product-grid">
                                        <div class="product-image">
                                            <img class="pic-1" src="images/img-1.jpg">
                                            <img class="pic-2" src="images/img-1.jpg">
                                            <ul class="social">
                                                <li><a href=""><i class="fa fa-search"></i></a></li>
                                                <li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product-content">
                                            <h3 class="title">Shorts</h3>
                                            <span class="price">$1199.99</span>
                                            <a href="" class="add-to-cart"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                        <nav style="text-align: center">
                            <ul class="pagination" id="commpage">
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr/>
</div>
</body>
<!--获取当前的用户并展示商品-->
<script>
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的商品收藏
            $.ajax({
                url: "/collection/commoditycollection",
                dataType: "json",
                data: "userId=" + user + "&currPage=1",
                success: function (data) {
                    if (data.dataList.length == 0) {
                        $('.img-item-list').append(`
                            <h3 style="text-align: center;margin-top: 75px;margin-bottom: 75px">美食收藏中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                            <hr/>
                        `)
                    }
                    //记录条数
                    var total1 = 0;
                    total1 = data.totalSize;
                    //页数
                    var pageNum = Math.ceil(total1 / 8);
                    //加载分页插件
                    var html = '';
                    for (var i = 1; i <= pageNum; i++) {
                        html += '<li><a href="javascript:void(0)" onclick="changeCurrPage1(' + i + ')">' + i + '</a></li>';
                    }
                    $('#commpage').html(html)
                    $.each(data.dataList, function (i, dom) {
                        $('.img-item-list').append(
                            `
                                <div class="col-md-3 col-sm-6" style="margin-bottom: 40px">
                                    <div class="product-grid">
                                        <div class="product-image">
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-1" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-2" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <ul class="social">
                                                <li><a href="#"><i class="glyphicon glyphicon-remove" style="margin-top: 10px" title="取消收藏" onclick="cancle1('${dom.commodityId}')"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product-content">
                                        <h4 class="title" style="max-height: 57px;min-height: 57px;overflow: hidden">${dom.commodityName}，${dom.commodityDescribe}</h4>
                                        <span class="price" style="font-size: 20px;color: #F44242">¥${parseFloat(dom.commodityPrice).toFixed(2)}</span>
                                        <a href="#" class="add-to-cart"><i class="fa fa-shopping-cart" title="添加到购物车" onclick="addcart('${dom.commodityId}')"></i></a>
                                        </div>
                                    </div>
                                </div>
                        `)
                    });
                }
            })
        }
    });
</script>
<!--设置分页，获取当前页数并展示商品-->
<script>
    var currPage = 1;

    function changeCurrPage1(page) {
        $('.img-item-list').html('');
        currPage = page;
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                //展示用户的商品收藏
                $.ajax({
                    url: "/collection/commoditycollection",
                    dataType: "json",
                    data: "userId=" + user + "&currPage=" + currPage,
                    success: function (data) {
                        $.each(data.dataList, function (i, dom) {
                            $('.img-item-list').append(
                                `
                                <div class="col-md-3 col-sm-6" style="margin-bottom: 40px">
                                    <div class="product-grid">
                                        <div class="product-image">
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-1" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-2" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <ul class="social">
                                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-remove" style="margin-top: 10px" title="取消收藏" onclick="cancle1('${dom.commodityId}')"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product-content">
                                        <h4 class="title" style="max-height: 57px;min-height: 57px;overflow: hidden">${dom.commodityName}，${dom.commodityDescribe}</h4>
                                        <span class="price" style="font-size: 20px;color: #F44242">¥${parseFloat(dom.commodityPrice).toFixed(2)}</span>
                                        <a href="javascript:void(0)" class="add-to-cart"><i class="fa fa-shopping-cart" title="添加到购物车" onclick="addcart('${dom.commodityId}')"></i></a>
                                        </div>
                                    </div>
                                </div>
                            `)
                        });
                    }
                })
            }
        });
    }
</script>
<!--设置分页，获取当前页数并展示商家-->
<script>
    var currPage2 = 1;

    function changeCurrPage2(page) {
        $('#storelist').html('');
        currPage2 = page;
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                //展示用户的商品收藏
                $.ajax({
                    url: "/collection/storecollection",
                    dataType: "json",
                    data: "userId=" + user + "&currPage=" + currPage2,
                    success: function (data) {
                        $.each(data.dataList, function (i, dom) {
                            $('#storelist').append(`
                            <div class="col-poi">
                                <div class="col-item clearfix">
                                    <div class="item-img"><a href="/storeInfo.html?storeId=${dom.storeId}"><img
                                            src="${dom.picture}"
                                            class="image"></a></div>
                                            <a href="/storeInfo.html?storeId=${dom.storeId}">
                                                  <div class="item-info">${dom.storeName}<br/>
                                                       <span>商家评分：${dom.storeScore}分</span>
                                                     <p>${dom.storeLocation}</p></div>
                                             </a>
                                    <div class="btn-box"><a href="/storeInfo.html?storeId=${dom.storeId}"
                                                            class="link show-deal">进入商家</a>
                                        <a href="#"
                                           class="link show-deal" onclick="cancle2('${dom.storeId}')">取消收藏</a>
                                    </div>
                                </div>
                            </div>
                        `)
                        });
                    }
                })
            }
        });
    }
</script>
<!--取消商品收藏-->
<script>
    function cancle1(commodityId) {
        var ok = window.confirm("确定要取消收藏吗")
        if (ok) {
            $.get("user/finduser", {}, function (data) {
                if (data.length > 0) {
                    var user = data;
                    $.ajax({
                        url: "/collection/canclecommoditycollection",
                        dataType: "json",
                        data: "userId=" + user + "&commodityId=" + commodityId,
                        success: function (data) {
                            //先清空在重新加载
                            $('.img-item-list').html("");
                            $.get("user/finduser", {}, function (data) {
                                if (data.length > 0) {
                                    var user = data;
                                    //展示用户的商品收藏
                                    $.ajax({
                                        url: "/collection/commoditycollection",
                                        dataType: "json",
                                        data: "userId=" + user + "&currPage=" + currPage,
                                        success: function (data) {
                                            if (data.dataList.length == 0) {
                                                $('.img-item-list').append(`
                                                  <h3 style="text-align: center;margin-top: 75px;margin-bottom: 75px">美食收藏中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                                                  <hr/>
                                               `)
                                            }
                                            $('#commpage').html("");
                                            //记录条数
                                            var total1 = 0;
                                            total1 = data.totalSize;
                                            //页数
                                            var pageNum = Math.ceil(total1 / 8);
                                            //加载分页插件
                                            var html = '';
                                            for (var i = 1; i <= pageNum; i++) {
                                                html += '<li><a href="javascript:void(0)" onclick="changeCurrPage1(' + i + ')">' + i + '</a></li>';
                                            }
                                            $('#commpage').html(html);
                                            $.each(data.dataList, function (i, dom) {
                                                $('.img-item-list').append(
                                                    `
                                <div class="col-md-3 col-sm-6" style="margin-bottom: 40px">
                                    <div class="product-grid">
                                        <div class="product-image">
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-1" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <a href="/commodity.html?commodityId=${dom.commodityId}" class="img-controller-img-link">
                                                <img class="pic-2" style="height: 150px;width: 240px" src="${dom.commodityPictures[0].picture}" title="${dom.commodityName}">
                                            </a>
                                            <ul class="social">
                                                <li><a href="#"><i class="glyphicon glyphicon-remove" style="margin-top: 10px" title="取消收藏" onclick="cancle1('${dom.commodityId}')"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product-content">
                                        <h4 class="title" style="max-height: 57px;min-height: 57px;overflow: hidden">${dom.commodityName}，${dom.commodityDescribe}</h4>
                                        <span class="price" style="font-size: 20px;color: #F44242">¥${parseFloat(dom.commodityPrice).toFixed(2)}</span>
                                        <a href="#" class="add-to-cart"><i class="fa fa-shopping-cart" title="添加到购物车" onclick="addcart('${dom.commodityId}')"></i></a>
                                        </div>
                                    </div>
                                </div>
                        `)
                                            });
                                        }
                                    })
                                }
                            });
                            alert(data.message);
                        }
                    })
                }
            });
        }
    }
</script>
<!--获取当前的用户并展示商家-->
<script>
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的商家收藏
            $.ajax({
                url: "/collection/storecollection",
                dataType: "json",
                data: "userId=" + user + "&currPage=1",
                success: function (data) {
                    if (data.dataList.length == 0) {
                        $('#storelist').append(`
                            <h3 style="text-align: center;margin-top: 75px;margin-bottom: 75px">商家收藏中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                            <hr/>
                        `)
                    }
                    //记录条数
                    var total1 = 0;
                    total1 = data.totalSize;
                    //页数
                    var pageNum = Math.ceil(total1 / 3);
                    //加载分页插件
                    var html = '';
                    for (var i = 1; i <= pageNum; i++) {
                        html += '<li><a href="javascript:void(0)" onclick="changeCurrPage2(' + i + ')">' + i + '</a></li>';
                    }
                    $('#storepage').html(html)
                    console.log(data)
                    $.each(data.dataList, function (i, dom) {
                        $('#storelist').append(`
                            <div class="col-poi">
                                <div class="col-item clearfix">
                                    <div class="item-img"><a href="/storeInfo.html?storeId=${dom.storeId}"><img
                                            src="${dom.picture}"
                                            class="image"></a></div>
                                            <a href="/storeInfo.html?storeId=${dom.storeId}">
                                                  <div class="item-info">${dom.storeName}<br/>
                                                       <span>商家评分：${dom.storeScore}分</span>
                                                     <p>${dom.storeLocation}</p></div>
                                             </a>
                                    <div class="btn-box"><a href="/storeInfo.html?storeId=${dom.storeId}"
                                                            class="link show-deal">进入商家</a>
                                        <a href="#"
                                           class="link show-deal" onclick="cancle2('${dom.storeId}')">取消收藏</a>
                                    </div>
                                </div>
                            </div>
                        `)
                    });
                }
            })
        }
    });
</script>
<!--取消商家收藏-->
<script>
    function cancle2(storeId) {
        var ok = window.confirm("确定要取消收藏吗")
        if (ok) {
            $.get("user/finduser", {}, function (data) {
                if (data.length > 0) {
                    var user = data;
                    $.ajax({
                        url: "/collection/canclestorecollection",
                        dataType: "json",
                        data: "userId=" + user + "&storeId=" + storeId,
                        success: function (data) {
                            //先清空在重新加载
                            $('#storelist').html("");
                            $.get("user/finduser", {}, function (data) {
                                if (data.length > 0) {
                                    var user = data;
                                    //展示用户的商家收藏
                                    $.ajax({
                                        url: "/collection/storecollection",
                                        dataType: "json",
                                        data: "userId=" + user + "&currPage=" + currPage2,
                                        success: function (data) {
                                            if (data.dataList.length == 0) {
                                                $('#storelist').append(`
                                                <h3 style="text-align: center;margin-top: 75px;margin-bottom: 75px">商家收藏中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                                                <hr/>
                                               `)
                                            }
                                            $('#storepage').html("");
                                            //记录条数
                                            var total1 = 0;
                                            total1 = data.totalSize;
                                            //页数
                                            var pageNum = Math.ceil(total1 / 3);
                                            //加载分页插件
                                            var html = '';
                                            for (var i = 1; i <= pageNum; i++) {
                                                html += '<li><a href="javascript:void(0)" onclick="changeCurrPage2(' + i + ')">' + i + '</a></li>';
                                            }
                                            $('#storepage').html(html);
                                            $.each(data.dataList, function (i, dom) {
                                                $('#storelist').append(`
                                                    <div class="col-poi">
                                                        <div class="col-item clearfix">
                                                            <div class="item-img"><img
                                                                    src="${dom.picture}"
                                                                    class="image"></div>
                                                            <div class="item-info"><p class="poi-name">${dom.storeName}</p>
                                                                <span>商家评分：${dom.storeScore}分</span>
                                                                <p>${dom.storeLocation}</p></div>
                                                            <div class="btn-box"><a href="#"
                                                                                    class="link show-deal" target="_blank">进入商家</a>
                                                                <a href="#"
                                                                   class="link show-deal" onclick="cancle2('${dom.storeId}')">取消收藏</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                 `)
                                            });
                                        }
                                    })
                                }
                            });
                            alert(data.message);
                        }
                    })
                }
            });
        }
    }
</script>
<!--添加到购物车-->
<script>
    function addcart(commodityId) {
        var ok = window.confirm("确定要添加该商品到购物车吗")
        if (ok) {
            $.get("user/finduser", {}, function (data) {
                if (data.length > 0) {
                    var user = data;
                    $.ajax({
                        url: "/collection/addtoshopcart",
                        dataType: "json",
                        data: "userId=" + user + "&commodityId=" + commodityId,
                        success: function (data) {
                            alert(data.message);
                        }
                    })
                }
            });
        }
    }
</script>
</html>